<template>
  <div class="e-container">
    <div class="search-wrapper">
      <van-search
        v-model="searchVal"
        placeholder="请输入搜索关键词"
        show-action
        shape="round"
        @search="onSearch"
      >
        <div slot="label" class="label-text" @click="switchType">{{searchType}}</div>
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </div>
    <div class="graph-wrapper">
      <v-chart :options="graph" @click="selectEntity"/>
    </div>
    <van-actionsheet
      cancel-text
      v-model="showTypeSheet"
      :actions="actions"
      @select="selectNetType"
    />
    <van-actionsheet :title="actionTitle" v-model="showContentSheet">
      <div class="content">测试</div>
    </van-actionsheet>
  </div>
</template>

<script>
import { Toast } from "vant";
import { echartOptions } from "../mock/echart";
import echarts from "echarts";

export default {
  props: {},
  data() {
    return {
      // echart option
      graph: echartOptions,

      //search
      searchType: "",
      searchVal: "",

      // type actionsheet
      showTypeSheet: false,
      actions: [
        {
          key: "net1",
          name: "光缆网"
        },
        {
          key: "net2",
          name: "传输网A"
        },
        {
          key: "net3",
          name: "传输网B"
        }
      ],

      // content actionsheet
      actionTitle: "当前节点信息",
      showContentSheet: false
    };
  },
  computed: {},
  created() {
    this.searchType = this.actions[0].name;
  },
  mounted() {},
  watch: {
    showContentSheet() {
      
    }
  },
  methods: {
    // search
    onSearch() {
      console.log("onsearch");
    },
    // click switch type
    switchType() {
      this.showTypeSheet = true;
    },
    // select type
    selectNetType(val) {
      Toast(val.name);
      this.showTypeSheet = false;
      this.searchType = val.name;
    },

    // echart click event
    selectEntity(ev) {
      if (ev.data) {
        setTimeout(() => {
          this.showContentSheet = true;
        }, 10);
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="sass">
.e-container 
  width: 100%
  height: 100%
  background-color: #e1e1e1
  .search-wrapper
    z-index: 1
    width: 100%
    position: absolute
    top: 0
    left: 0
    .van-search
      .label-text
        font-size: 10px
        line-height: 34px
        color: #a1a1a1
  .graph-wrapper
    z-index: -1
    .echarts 
      width: 100%
      height: 100%
      position: absolute
      top: 0px
</style>
